<template>
    <div class="main" id="maa">
        <canvas id="spectrumPainter"></canvas>
    </div>
</template>

<script>
export default {
    name: 'SpectrumView',
    emits:['chooseFreqChange'],
    components: {},
    props:[
        'vShowType', //显示模式
        'vFftData', //fft数据
        'vWaveData', //wave数据
    ],
    computed: {},
    watch: {
        vShowType: {
            handler: function(newVal, oldVal){
                this.showType = newVal
                this.resetRect()
                this.paint()
            },
            // deep:true,//使用deep深度监听对象
            // immediate: true // watch侦听操作内的函数会立刻被执行
        },
        vFftData:{
            handler:function (newVal, oldVal){
                this.fftData = newVal;
                this.jionFull = true
                this.paint()
            }
        },
        vWaveData:{
            handler:function (newVal, oldVal){
                this.waveData = newVal;
                this.paint()
            }
        }
    },
    data: function () {
        return {
            viewTypeEnum: {
                FFT: 1,
                WAVE: 2,
                FULL: 3,
                FFT_WAVE: 4,
                FFT_FULL: 5,
                properties: {
                    1: {name: '频域图', value: 1},
                    2: {name: '时域图', value: 2},
                    3: {name: '瀑布图', value: 3},
                    4: {name: '频域+时域图', value: 4},
                    5: {name: '频域+瀑布图', value: 5}
                }
            },
            showType: 1,
            fftRect: {left: 10, right: 1000, top: 10, bottom: 500, width: 1000, height: 200},
            freqRect: {left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0},
            levelRect: {left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0},
            fullRect: {left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0}, // 瀑布图区域
            legendRect: {left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0}, // 图例区域
            waveRect: {left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0}, // 图例区域
            leftPadding: 10,
            rightPadding: 50,
            topPadding: 10,
            bottomPadding: 25,
            minFreq: 0,
            maxFreq: 1000,
            leftFreq: 0,
            rightFreq: 1000,
            minLevel: -500,
            maxLevel: 500,
            minWav: -16384,
            maxWav: 16384,
            bottomLevel: -200,
            topLevel: 200,
            rowNum: 10, // 行
            cloumnNum: 10, // 列
            canvas: null, // 画布
            painter: null, //
            jionFull: false,
            fullImg: null, // 瀑布图缓存
            timer: null, // 瀑布图定时器
            fftData: [], // fft数据
            waveData: [],
            filePos: 0,
            fileLength: 0,
            chooseShow: false,
            chooseIng: false,
            chooseBeginX: 0,
            chooseEndX: 0,
            chooseBeginFreq: 0,
            chooseEndFreq: 0,
            mouseBeginX: 0, // 鼠标按下点
            mouseBeginY: 0, // 鼠标按下点
            mouseHoverX: 0, // 鼠标悬浮坐标点X
            mouseHoverY: 0,
            mouseEndX: 0, // 鼠标弹起点X
            mouseEndY: 0, // 鼠标弹起点X
            selectFreq: false,
            moveFreq: false,
            selectLevel: false,
            moveLevel: false,
            observer:null
            // colors: {
            //   chooseColor:
            // }
        }
    },
    methods: {
        // 检测浏览器
        detectBrowser: function () {
            if (!window.FileReader) {
                console.log('你的浏览器不支持读取文件')
            }
        },
        resetRect: function () {
            this.canvas.width = document.getElementById('maa').offsetWidth
            this.canvas.height = document.getElementById('maa').offsetHeight
            // 全部归0
            // fft区域
            this.fftRect.left = 0
            this.fftRect.right = 0
            this.fftRect.top = 0
            this.fftRect.bottom = 0
            this.fftRect.width = 0
            this.fftRect.height = 0
            // 频率刻度区域
            this.freqRect.left = 0
            this.freqRect.right = 0
            this.freqRect.top = 0
            this.freqRect.bottom = 0
            this.freqRect.width = 0
            this.freqRect.height = 0
            // 电平刻度区域
            this.levelRect.left = 0
            this.levelRect.right = 0
            this.levelRect.top = 0
            this.levelRect.bottom = 0
            this.levelRect.width = 0
            this.levelRect.height = 0
            // 波形图区域
            this.waveRect.left = 0
            this.waveRect.right = 0
            this.waveRect.top = 0
            this.waveRect.bottom = 0
            this.waveRect.width = 0
            this.waveRect.height = 0
            // 瀑布图区域
            this.fullRect.left = 0
            this.fullRect.right = 0
            this.fullRect.top = 0
            this.fullRect.bottom = 0
            this.fullRect.width = 0
            this.fullRect.height = 0
            // 瀑布图图例区域
            this.legendRect.left = 0
            this.legendRect.right = 0
            this.legendRect.top = 0
            this.legendRect.bottom = 0
            this.levelRect.width = 0
            this.legendRect.height = 0

            if (this.showType === this.viewTypeEnum.FFT) {
                // fft区域
                this.fftRect.left = this.leftPadding
                this.fftRect.right = this.canvas.width - this.rightPadding
                this.fftRect.top = this.topPadding
                this.fftRect.bottom = this.canvas.height - this.bottomPadding
                this.fftRect.width = this.canvas.width - this.leftPadding - this.rightPadding
                this.fftRect.height = this.canvas.height - this.topPadding - this.bottomPadding
                // 频率刻度区域
                this.freqRect.left = this.fftRect.left
                this.freqRect.right = this.fftRect.right
                this.freqRect.top = this.fftRect.bottom
                this.freqRect.bottom = this.canvas.height
                this.freqRect.width = this.fftRect.width
                this.freqRect.height = this.bottomPadding
                // 电平刻度区域
                this.levelRect.left = this.fftRect.right
                this.levelRect.right = this.canvas.width
                this.levelRect.top = this.fftRect.top
                this.levelRect.bottom = this.fftRect.bottom
                this.levelRect.width = this.rightPadding
                this.levelRect.height = this.fftRect.height
            } else if (this.showType === this.viewTypeEnum.WAVE) {
                // 波形图区域
                this.waveRect.left = this.leftPadding
                this.waveRect.right = this.canvas.width - this.rightPadding
                this.waveRect.top = this.topPadding
                this.waveRect.bottom = this.canvas.height - this.bottomPadding
                this.waveRect.width = this.canvas.width - this.leftPadding - this.rightPadding
                this.waveRect.height = this.canvas.height - this.topPadding - this.bottomPadding
            } else if (this.showType === this.viewTypeEnum.FULL) {
                // 瀑布图区域
                this.fullRect.left = this.leftPadding
                this.fullRect.right = this.canvas.width - this.rightPadding
                this.fullRect.top = this.topPadding
                this.fullRect.bottom = this.canvas.height - this.bottomPadding
                this.fullRect.width = this.canvas.width - this.leftPadding - this.rightPadding
                this.fullRect.height = this.canvas.height - this.topPadding - this.bottomPadding
                this.fullImg = this.painter.getImageData(this.fullRect.left, this.fullRect.top, this.fullRect.width, this.fullRect.height - 1)
                // 瀑布图图例区域
                this.legendRect.left = this.fullRect.right
                this.legendRect.right = this.canvas.width
                this.legendRect.top = this.fullRect.top
                this.legendRect.bottom = this.fullRect.bottom
                this.legendRect.width = this.rightPadding
                this.legendRect.height = this.fullRect.height
            } else if (this.showType === this.viewTypeEnum.FFT_WAVE) {
                // fft区域
                this.fftRect.left = this.leftPadding
                this.fftRect.right = this.canvas.width - this.rightPadding
                this.fftRect.top = this.topPadding
                this.fftRect.bottom = this.canvas.height / 2 - this.bottomPadding
                this.fftRect.width = this.canvas.width - this.leftPadding - this.rightPadding
                this.fftRect.height = this.canvas.height / 2 - this.topPadding - this.bottomPadding
                // 频率刻度区域
                this.freqRect.left = this.fftRect.left
                this.freqRect.right = this.fftRect.right
                this.freqRect.top = this.fftRect.bottom
                this.freqRect.bottom = this.canvas.height / 2
                this.freqRect.width = this.fftRect.width
                this.freqRect.height = this.bottomPadding
                // 电平刻度区域
                this.levelRect.left = this.fftRect.right
                this.levelRect.right = this.canvas.width
                this.levelRect.top = this.fftRect.top
                this.levelRect.bottom = this.fftRect.bottom
                this.levelRect.width = this.rightPadding
                this.levelRect.height = this.fftRect.height
                // 波形图区域
                this.waveRect.left = this.leftPadding
                this.waveRect.right = this.canvas.width - this.rightPadding
                this.waveRect.top = this.canvas.height / 2 + this.topPadding
                this.waveRect.bottom = this.canvas.height - this.bottomPadding
                this.waveRect.width = this.canvas.width - this.leftPadding - this.rightPadding
                this.waveRect.height = this.canvas.height / 2 - this.topPadding - this.bottomPadding
            } else if (this.showType === this.viewTypeEnum.FFT_FULL) {
                // fft区域
                this.fftRect.left = this.leftPadding
                this.fftRect.right = this.canvas.width - this.rightPadding
                this.fftRect.top = this.topPadding
                this.fftRect.bottom = this.canvas.height / 2 - this.bottomPadding
                this.fftRect.width = this.canvas.width - this.leftPadding - this.rightPadding
                this.fftRect.height = this.canvas.height / 2 - this.topPadding - this.bottomPadding
                // 频率刻度区域
                this.freqRect.left = this.fftRect.left
                this.freqRect.right = this.fftRect.right
                this.freqRect.top = this.fftRect.bottom
                this.freqRect.bottom = this.canvas.height / 2
                this.freqRect.width = this.fftRect.width
                this.freqRect.height = this.bottomPadding
                // 电平刻度区域
                this.levelRect.left = this.fftRect.right
                this.levelRect.right = this.canvas.width
                this.levelRect.top = this.fftRect.top
                this.levelRect.bottom = this.fftRect.bottom
                this.levelRect.width = this.rightPadding
                this.levelRect.height = this.fftRect.height
                // 瀑布图区域
                this.fullRect.left = this.leftPadding
                this.fullRect.right = this.canvas.width - this.rightPadding
                this.fullRect.top = this.canvas.height / 2 + this.topPadding
                this.fullRect.bottom = this.canvas.height - this.bottomPadding
                this.fullRect.width = this.canvas.width - this.leftPadding - this.rightPadding
                this.fullRect.height = this.canvas.height / 2 - this.topPadding - this.bottomPadding

                this.fullImg = this.painter.getImageData(this.fullRect.left, this.fullRect.top, this.fullRect.width, this.fullRect.height - 1)
                // 瀑布图图例区域
                this.legendRect.left = this.fullRect.right
                this.legendRect.right = this.canvas.width
                this.legendRect.top = this.fullRect.top
                this.legendRect.bottom = this.fullRect.bottom
                this.legendRect.width = this.rightPadding
                this.legendRect.height = this.fullRect.height
            }
            this.paint()
        },
        drawFft: function () {
            this.painter.save()
            this.painter.strokeStyle = '#f5d37f'
            this.painter.lineWidth = 1
            this.painter.beginPath()
            // this.canvas.clipRect(this.fftRect.left, this.fftRect.top, this.fftRect.width, this.fftRect.height)
            for (let i = 1; i < this.fftData.length; i++) {
                this.painter.moveTo(Math.round((this.fftData[i - 1][0] - this.leftFreq) / (this.rightFreq - this.leftFreq) * this.fftRect.width + this.fftRect.left),
                    Math.round((this.topLevel - this.fftData[i - 1][1]) / (this.topLevel - this.bottomLevel) * this.fftRect.height + this.fftRect.top))
                this.painter.lineTo(Math.round((this.fftData[i][0] - this.leftFreq) / (this.rightFreq - this.leftFreq) * this.fftRect.width + this.fftRect.left),
                    Math.round((this.topLevel - this.fftData[i][1]) / (this.topLevel - this.bottomLevel) * this.fftRect.height + this.fftRect.top))
            }
            // this.canvas.clipRect(0, 0, this.canvas.width, this.canvas.height)
            this.painter.rect(this.fftRect.left, this.fftRect.top, this.fftRect.width, this.fftRect.height)
            this.painter.clip()
            this.painter.closePath()
            this.painter.stroke()
            this.painter.restore()
        },
        drawLegend: function () {
            this.painter.save()
            let grad = this.painter.createLinearGradient(0, this.legendRect.top, 0, this.legendRect.bottom)
            grad.addColorStop(0, 'rgb(0,0,0)')
            grad.addColorStop(1, 'rgb(255,255,255)')
            this.painter.fillStyle = grad
            this.painter.fillRect(this.legendRect.left + this.legendRect.width / 4, this.legendRect.top, this.legendRect.width / 2, this.legendRect.height)
            this.painter.fillStyle = null
            this.painter.restore()
        },
        drawFull: function () {
            if (this.jionFull) {
                let startPx = 0
                let stopPx = 0
                let startIndex = 0
                let stopIndex = this.fftData.length - 1
                let step = 1

                if (this.fftData.length === 0) return

                if (this.leftFreq > this.fftData[0][0]) {
                    startPx = 0
                    startIndex = (this.leftFreq - this.fftData[0][0]) / (this.fftData[this.fftData.length - 1][0] - this.fftData[0][0]) * this.fftData.length
                } else {
                    startPx = (this.fftData[0][0] - this.leftFreq) / (this.rightFreq - this.leftFreq) * this.fullRect.width
                    startIndex = 0
                }

                if (this.rightFreq > this.fftData[this.fftData.length - 1][0]) {
                    stopPx = (this.fftData[this.fftData.length - 1][0] - this.leftFreq) / (this.rightFreq - this.leftFreq) * this.fullRect.width
                    stopIndex = this.fftData.length - 1
                } else {
                    stopPx = this.fullRect.width
                    stopIndex = (this.rightFreq - this.fftData[0][0]) / (this.fftData[this.fftData.length - 1][0] - this.fftData[0][0]) * this.fftData.length
                }
                step = (stopIndex - startIndex) / (stopPx - startPx)
                const imageData = this.painter.createImageData(this.fullRect.width, 1)
                for (let i = startPx; i < stopPx; i++) {
                    const vi = (i - startPx)
                    imageData.data[Math.round(i) * 4] = 255 - (this.fftData[Math.round(vi * step + startIndex)][1] - this.bottomLevel) / (this.topLevel - this.bottomLevel) * 255
                    imageData.data[Math.round(i) * 4 + 1] = 255 - (this.fftData[Math.round(vi * step + startIndex)][1] - this.bottomLevel) / (this.topLevel - this.bottomLevel) * 255
                    imageData.data[Math.round(i) * 4 + 2] = 255 - (this.fftData[Math.round(vi * step + startIndex)][1] - this.bottomLevel) / (this.topLevel - this.bottomLevel) * 255
                    imageData.data[Math.round(i) * 4 + 3] = 255
                }
                this.painter.putImageData(imageData, this.fullRect.left, this.fullRect.top)
                this.painter.putImageData(this.fullImg, this.fullRect.left, this.fullRect.top + 1)
                this.fullImg = this.painter.getImageData(this.fullRect.left, this.fullRect.top, this.fullRect.width, this.fullRect.height)
                this.jionFull = false
            } else {
                this.painter.putImageData(this.fullImg, this.fullRect.left, this.fullRect.top)
            }
        },
        drawWave: function () {
            this.painter.save()
            this.painter.strokeStyle = '#f5d37f'
            this.painter.lineWidth = 1
            this.painter.beginPath()
            // this.canvas.clipRect(this.fftRect.left, this.fftRect.top, this.fftRect.width, this.fftRect.height)
            let step = this.waveRect.width / this.waveData.length
            for (let i = 1; i < this.waveData.length; i++) {
                this.painter.moveTo((i - 1) * step,
                    (this.maxWav - this.waveData[i - 1]) / (this.maxWav - this.minWav) * this.waveRect.height + this.waveRect.top)
                this.painter.lineTo(i * step,
                    (this.maxWav - this.waveData[i]) / (this.maxWav - this.minWav) * this.waveRect.height + this.waveRect.top)
            }
            this.painter.rect(this.waveRect.left, this.waveRect.top, this.waveRect.width, this.waveRect.height)
            this.painter.clip()
            this.painter.closePath()
            this.painter.stroke()
            this.painter.restore()
        },
        drawWaveGrid: function () {
            this.painter.save()
            this.painter.strokeStyle = '#cfd9da'
            this.painter.lineWidth = 0.5
            this.painter.beginPath()

            // 画横线
            for (let i = 0; i <= this.rowNum; i++) {
                this.painter.moveTo(this.waveRect.left, this.waveRect.height / this.rowNum * i + this.waveRect.top)
                this.painter.lineTo(this.waveRect.right, this.waveRect.height / this.rowNum * i + this.waveRect.top)
            }
            this.painter.stroke()
            this.painter.closePath()
            this.painter.restore()
        },
        measureText: function (fontSize, fontFamily, text) {
            let spanDom = document.createElement('span')
            spanDom.style.margin = '0'
            spanDom.style.fontSize = fontSize
            spanDom.style.opacity = '0'
            // spanDom.style.fontFamily = fontFamily;
            spanDom.innerHTML = text
            document.body.append(spanDom)
            let sizeD = {}
            sizeD.width = spanDom.offsetWidth
            sizeD.height = spanDom.offsetHeight / 2
            spanDom.remove()
            return sizeD
        },
        drawFreq: function () {
            this.painter.strokeStyle = '#f8fafa'
            this.painter.fillStyle = '#f8fafa'
            for (let i = 0; i <= this.cloumnNum; i++) {
                let freqStr = (this.leftFreq + (this.rightFreq - this.leftFreq) / this.cloumnNum * i).toFixed(2) + ' Mhz'
                let halfwidth = this.painter.measureText(freqStr).width / 2
                let halfHeight = this.measureText(this.painter.fontSize, this.painter.fontFamily, freqStr).height
                if (i === 0) {
                    this.painter.fillText(freqStr, this.fftRect.left, this.fftRect.bottom + halfHeight, this.painter.measureText(freqStr).width)
                } else {
                    this.painter.fillText(freqStr, this.fftRect.width / this.cloumnNum * i + this.leftPadding - halfwidth, this.fftRect.bottom + halfHeight, this.painter.measureText(freqStr).width)
                    // this.painter.strokeText(freqStr, this.fftRect.width / this.cloumnNum * i + this.leftPadding, this.canvas.height - this.bottomPadding, this.painter.measureText(freqStr).width)
                }
            }
        },
        drawLevel: function () {
            this.painter.strokeStyle = '#f8fafa'
            this.painter.fillStyle = '#f8fafa'
            for (let i = 0; i <= this.rowNum; i++) {
                let levelStr = (this.topLevel - (this.topLevel - this.bottomLevel) / this.rowNum * i).toFixed(1) + ' Bd'
                let halfHeight = this.measureText(this.painter.fontSize, this.painter.fontFamily, levelStr).height / 2
                if (i === this.rowNum) {
                    this.painter.fillText(levelStr, this.fftRect.right, this.fftRect.bottom, this.painter.measureText(levelStr).width)
                } else {
                    this.painter.fillText(levelStr, this.fftRect.right, this.fftRect.height / this.rowNum * i + this.topPadding + halfHeight, this.painter.measureText(levelStr).width)
                    // this.painter.strokeText(freqStr, this.fftRect.width / this.cloumnNum * i + this.leftPadding, this.canvas.height - this.bottomPadding, this.painter.measureText(freqStr).width)
                }
            }
        },
        drawChoose: function () {
            this.painter.save()
            let startX = (this.chooseBeginFreq - this.leftFreq) / (this.rightFreq - this.leftFreq) * this.fftRect.width + this.fftRect.left
            let endX = (this.chooseEndFreq - this.leftFreq) / (this.rightFreq - this.leftFreq) * this.fftRect.width + this.fftRect.left
            // 创建一个渐变色线性对象
            let grad = this.painter.createLinearGradient(startX > endX ? endX : startX, 0, startX > endX ? startX : endX, 0)
            // 设置渐变颜色
            grad.addColorStop(0, 'rgba(22,184,200,0.47)')
            grad.addColorStop(0.5, 'rgba(82,67,192,0.47)')
            grad.addColorStop(1, 'rgba(22,184,200,0.47)')
            // 设置fillStyle为当前的渐变对象
            this.painter.fillStyle = grad
            // 绘制渐变图形
            this.painter.fillRect(startX > endX ? endX : startX, this.fftRect.top, Math.abs(endX - startX), this.fftRect.height)
            this.painter.fillStyle = null
            this.painter.restore()
        },
        drawSelectFreq: function () {
            this.painter.save()
            this.painter.fillStyle = 'rgba(73,114,248,0.87)'
            this.painter.fillRect(this.mouseBeginX, this.fftRect.top, this.mouseEndX - this.mouseBeginX, this.fftRect.height + this.freqRect.height)
            this.painter.fillStyle = null
            this.painter.restore()
        },
        drawSelectLevel: function () {
            this.painter.save()
            this.painter.fillStyle = 'rgba(73,114,248,0.87)'
            this.painter.fillRect(this.leftPadding, this.mouseBeginY, this.freqRect.width + this.levelRect.width, this.mouseEndY - this.mouseBeginY)
            this.painter.fillStyle = null
            this.painter.restore()
        },
        drawFftGrid: function () {
            this.painter.save()
            this.painter.strokeStyle = '#cfd9da'
            this.painter.lineWidth = 0.5
            this.painter.beginPath()

            // 画横线
            for (let i = 0; i <= this.rowNum; i++) {
                this.painter.moveTo(this.fftRect.left, this.fftRect.height / this.rowNum * i + this.fftRect.top)
                this.painter.lineTo(this.fftRect.right, this.fftRect.height / this.rowNum * i + this.fftRect.top)
            }

            // 画纵线
            for (let i = 0; i <= this.cloumnNum; i++) {
                this.painter.moveTo(this.fftRect.width / this.cloumnNum * i + this.fftRect.left, this.fftRect.top)
                this.painter.lineTo(this.fftRect.width / this.cloumnNum * i + this.fftRect.left, this.fftRect.bottom)
            }
            this.painter.stroke()
            this.painter.closePath()
            this.painter.restore()
        },
        paint: function () {
            this.painter.clearRect(0, 0, this.canvas.width, this.canvas.height)
            if (this.showType === this.viewTypeEnum.FFT || this.showType === this.viewTypeEnum.FFT_WAVE || this.showType === this.viewTypeEnum.FFT_FULL) this.drawFftGrid()
            if (this.showType === this.viewTypeEnum.FFT || this.showType === this.viewTypeEnum.FFT_WAVE || this.showType === this.viewTypeEnum.FFT_FULL) this.drawFft()
            if (this.chooseShow) this.drawChoose()
            if (this.showType === this.viewTypeEnum.FFT || this.showType === this.viewTypeEnum.FFT_WAVE || this.showType === this.viewTypeEnum.FFT_FULL)this.drawFreq()
            if (this.showType === this.viewTypeEnum.FFT || this.showType === this.viewTypeEnum.FFT_WAVE || this.showType === this.viewTypeEnum.FFT_FULL)this.drawLevel()
            if (this.selectFreq) this.drawSelectFreq()
            if (this.selectLevel) this.drawSelectLevel()
            if (this.showType === this.viewTypeEnum.FULL || this.showType === this.viewTypeEnum.FFT_FULL) this.drawLegend()
            if (this.showType === this.viewTypeEnum.FULL || this.showType === this.viewTypeEnum.FFT_FULL) this.drawFull()
            if (this.showType === this.viewTypeEnum.WAVE || this.showType === this.viewTypeEnum.FFT_WAVE) this.drawWave()
            if (this.showType === this.viewTypeEnum.WAVE || this.showType === this.viewTypeEnum.FFT_WAVE) this.drawWaveGrid()
        },

        // 封装的scrollTop
        scroll: function () {
            if (window.pageYOffset != null) { // ie9+ 高版本浏览器
                // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
                return {
                    left: window.pageXOffset,
                    top: window.pageYOffset
                }
            } else if (document.compatMode === 'CSS1Compat') { // 标准浏览器   来判断有没有声明DTD
                return {
                    left: document.documentElement.scrollLeft,
                    top: document.documentElement.scrollTop
                }
            }
            return { // 未声明 DTD
                left: document.body.scrollLeft,
                top: document.body.scrollTop
            }
        },
        canvasDown: function (e) {
            //alert(this.canvas.getBoundingClientRect().top + (document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop))
            // this.mouseBeginX = e.pageX - this.canvas.offsetLeft
            // this.mouseBeginY = e.pageY - this.canvas.offsetTop

            this.mouseBeginX = e.pageX - (this.canvas.getBoundingClientRect().left + (document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop))
            this.mouseBeginY = e.pageY - (this.canvas.getBoundingClientRect().top + (document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop))
            //alert(this.canvas.offsetTop)
            // alert(this.mouseBeginY)
            this.mouseEndX = this.mouseBeginX
            this.mouseEndY = this.mouseBeginY
            if (e.button === 0 && this.mouseBeginX > this.fftRect.left && this.mouseBeginX < this.fftRect.right && this.mouseBeginY > this.fftRect.top && this.mouseBeginY < this.fftRect.bottom) {
                this.chooseIng = true
                this.chooseShow = true
                this.chooseBeginFreq = (this.mouseBeginX - this.fftRect.left) / this.fftRect.width * (this.rightFreq - this.leftFreq) + this.leftFreq
            }
            if (this.mouseBeginX > this.freqRect.left && this.mouseBeginX < this.freqRect.right && this.mouseBeginY > this.freqRect.top && this.mouseBeginY < this.freqRect.bottom) {
                if (e.button === 2) {
                    this.selectFreq = true
                } else if (e.button === 0) {
                    this.moveFreq = true
                }
            }
            if (this.mouseBeginX > this.levelRect.left && this.mouseBeginX < this.levelRect.right && this.mouseBeginY > this.levelRect.top && this.mouseBeginY < this.levelRect.bottom) {
                if (e.button === 2) {
                    this.selectLevel = true
                } else if (e.button === 0) {
                    this.moveLevel = true
                }
            }
        },
        canvasMove: function (e) {
            // this.mouseHoverX = e.pageX - this.canvas.offsetLeft
            // this.mouseHoverY = e.pageY - this.canvas.offsetTop
            this.mouseHoverX = e.pageX - (this.canvas.getBoundingClientRect().left + (document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop))
            this.mouseHoverY = e.pageY - (this.canvas.getBoundingClientRect().top + (document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop))

            this.mouseEndX = this.mouseHoverX
            this.mouseEndY = this.mouseHoverY
            if (this.chooseIng) {
                this.chooseEndFreq = (this.mouseEndX - this.fftRect.left) / this.fftRect.width * (this.rightFreq - this.leftFreq) + this.leftFreq
            }
            if (this.moveFreq) {
                let moveVal = (this.rightFreq - this.leftFreq) / this.freqRect.width * (this.mouseBeginX - this.mouseEndX)
                if (this.leftFreq + moveVal >= this.minFreq && this.rightFreq + moveVal <= this.maxFreq) {
                    this.leftFreq += moveVal
                    this.rightFreq += moveVal
                }
                this.mouseBeginX = this.mouseEndX
                this.mouseBeginY = this.mouseEndY
            }
            if (this.moveLevel) {
                let moveVal = (this.topLevel - this.bottomLevel) / this.levelRect.height * (this.mouseEndY - this.mouseBeginY)
                if (this.topLevel + moveVal <= this.maxLevel && this.bottomLevel + moveVal >= this.minLevel) {
                    this.topLevel += moveVal
                    this.bottomLevel += moveVal
                }
                this.mouseBeginX = this.mouseEndX
                this.mouseBeginY = this.mouseEndY
            }
            if (this.selectFreq || this.selectLevel || this.chooseIng || this.moveFreq || this.moveLevel) this.paint()
        },
        canvasUp: function (e) {
            // this.mouseEndX = e.pageX - this.canvas.offsetLeft
            // this.mouseEndY = e.pageY - this.canvas.offsetTop

            this.mouseEndX = e.pageX - (this.canvas.getBoundingClientRect().left + (document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop))
            this.mouseEndY = e.pageY - (this.canvas.getBoundingClientRect().top + (document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop))

            if (this.chooseIng) {
                this.chooseEndFreq = (this.mouseEndX - this.fftRect.left) / this.fftRect.width * (this.rightFreq - this.leftFreq) + this.leftFreq
                if (this.chooseEndFreq < this.chooseBeginFreq) {
                    let freq = this.chooseEndFreq
                    this.chooseEndFreq = this.chooseBeginFreq
                    this.chooseBeginFreq = freq
                }
                // alert('框选开始频率:' + this.chooseBeginFreq + '框选结束频率' + this.chooseEndFreq)
            }
            if (this.chooseEndFreq === this.chooseBeginFreq) {
                this.chooseShow = false
            }
            if (this.selectFreq) {
                let beginFreq = (this.mouseBeginX > this.mouseEndX ? this.mouseEndX : this.mouseBeginX - this.freqRect.left) / this.freqRect.width * (this.rightFreq - this.leftFreq) + this.leftFreq
                let endFreq = (this.mouseBeginX > this.mouseEndX ? this.mouseBeginX : this.mouseEndX - this.freqRect.left) / this.freqRect.width * (this.rightFreq - this.leftFreq) + this.leftFreq
                this.leftFreq = beginFreq
                this.rightFreq = endFreq
            }
            if (this.selectLevel) {
                let bottomLevel = this.topLevel - (this.mouseBeginY > this.mouseEndY ? this.mouseBeginY : this.mouseEndY - this.levelRect.top) / this.levelRect.height * (this.topLevel - this.bottomLevel)
                let topLevel = this.topLevel - (this.mouseBeginY > this.mouseEndY ? this.mouseEndY : this.mouseBeginY - this.levelRect.top) / this.levelRect.height * (this.topLevel - this.bottomLevel)
                this.bottomLevel = bottomLevel
                this.topLevel = topLevel
            }
            this.chooseIng = false
            this.selectFreq = false
            this.moveFreq = false
            this.selectLevel = false
            this.moveLevel = false
            this.paint()
        },
        canvasDblClick: function (e) {
            // 重置频率区域
            if (e.button === 0 && this.mouseHoverX > this.freqRect.left && this.mouseHoverX < this.freqRect.right && this.mouseHoverY > this.freqRect.top && this.mouseHoverY < this.freqRect.bottom) {
                this.leftFreq = this.minFreq
                this.rightFreq = this.maxFreq
                this.paint()
            }
            // 重置电平区域
            if (e.button === 0 && this.mouseHoverX > this.levelRect.left && this.mouseHoverX < this.levelRect.right && this.mouseHoverY > this.levelRect.top && this.mouseHoverY < this.levelRect.bottom) {
                this.bottomLevel = this.minLevel
                this.topLevel = this.maxLevel
                this.paint()
            }
        },
        canvasWheel: function (e) {
            if (e.wheelDelta > 0 || e.detail < 0) {
                if (this.mouseHoverX > this.freqRect.left && this.mouseHoverX < this.freqRect.right && this.mouseHoverY > this.freqRect.top && this.mouseHoverY < this.freqRect.bottom) {
                    let changeVal = (this.rightFreq - this.leftFreq) / 10
                    let changeLeftVal = (this.mouseHoverX - this.freqRect.left) / this.freqRect.width * changeVal
                    let changeRightVal = changeVal - changeLeftVal
                    this.leftFreq += changeLeftVal
                    this.rightFreq -= changeRightVal
                }
                if (this.mouseHoverX > this.levelRect.left && this.mouseHoverX < this.levelRect.right && this.mouseHoverY > this.levelRect.top && this.mouseHoverY < this.levelRect.bottom) {
                    let changeVal = (this.topLevel - this.bottomLevel) / 10
                    let changeTopVal = (this.mouseHoverY - this.levelRect.top) / this.levelRect.height * changeVal
                    let changeBottomVal = changeVal - changeTopVal
                    this.topLevel -= changeTopVal
                    this.bottomLevel += changeBottomVal
                }
            } else {
                if (this.mouseHoverX > this.freqRect.left && this.mouseHoverX < this.freqRect.right && this.mouseHoverY > this.freqRect.top && this.mouseHoverY < this.freqRect.bottom) {
                    let changeVal = (this.rightFreq - this.leftFreq) / 9
                    let changeLeftVal = (this.mouseHoverX - this.freqRect.left) / this.freqRect.width * changeVal
                    let changeRightVal = changeVal - changeLeftVal
                    if (this.leftFreq - changeLeftVal < this.minFreq) {
                        this.leftFreq = this.minFreq
                    } else {
                        this.leftFreq -= changeLeftVal
                    }
                    if (this.rightFreq + changeRightVal > this.maxFreq) {
                        this.rightFreq = this.maxFreq
                    } else {
                        this.rightFreq += changeRightVal
                    }
                }
                if (this.mouseHoverX > this.levelRect.left && this.mouseHoverX < this.levelRect.right && this.mouseHoverY > this.levelRect.top && this.mouseHoverY < this.levelRect.bottom) {
                    let changeVal = (this.topLevel - this.bottomLevel) / 10
                    let changeTopVal = (this.mouseHoverY - this.levelRect.top) / this.levelRect.height * changeVal
                    let changeBottomVal = changeVal - changeTopVal
                    if (this.topLevel + changeTopVal > this.maxLevel) {
                        this.topLevel = this.maxLevel
                    } else {
                        this.topLevel += changeTopVal
                    }
                    if (this.bottomLevel - changeBottomVal < this.minLevel) {
                        this.bottomLevel = this.minLevel
                    } else {
                        this.bottomLevel -= changeBottomVal
                    }
                }
            }
            this.paint()
            e.preventDefault()
        },
        canvasOver: function (e) {
            console.log('移入')
        },
        canvasOut: function (e) {
            if (this.chooseIng) {
                this.mouseEndX = e.clientX - this.canvas.offsetLeft
                this.mouseEndY = e.clientY - this.canvas.offsetTop
                this.chooseIng = false
            }
            this.selectFreq = false
            this.moveFreq = false
            this.selectLevel = false
            this.moveLevel = false
        }
    },
    mounted: function () {
        this.canvas = document.getElementById('spectrumPainter')
        this.canvas.width = document.getElementById('maa').offsetWidth
        this.canvas.height = document.getElementById('maa').offsetHeight
        this.painter = this.canvas.getContext('2d')
        this.painter.fillStyle = 'rgb(133,155,238)'

        // document.getElementById('maa').addEventListener('resize', this.resetRect)
        // window.addEventListener('resize', this.resetRect)

        this.observer = new ResizeObserver(this.resetRect);
        this.observer.observe(document.getElementById('maa'), { box: "border-box" });

        this.canvas.addEventListener('contextmenu', function (e) {e.preventDefault()})
        this.canvas.addEventListener('mousedown', this.canvasDown)
        this.canvas.addEventListener('mousemove', this.canvasMove)
        this.canvas.addEventListener('mouseup', this.canvasUp)
        this.canvas.addEventListener('dblclick', this.canvasDblClick)
        this.canvas.addEventListener('mousewheel', this.canvasWheel)
        this.canvas.addEventListener('mouseover', this.canvasOver)
        this.canvas.addEventListener('mouseout', this.canvasOut)

        this.detectBrowser()
        this.resetRect()
        this.paint()
    },
    destroyed: function () {
        this.observer.disconnect();
        // let that = this
    }
}
</script>

<style scoped>
.main{
    width: 100%;
    height: 500px;
    background: #2c3e50;
}
</style>
